import React from 'react';
import { Card } from 'antd';
import { useNavigate } from 'react-router-dom';
import PropTypes from 'prop-types';

import { urlMap, imagesMap, resourseMap } from '@/utils';

const CommonCard = (props) => {
    const { type, title, cardId, baseUrl, imageUrl } = props;
    const navigator = useNavigate();

    const url = urlMap.defaultUrl + resourseMap[type] + cardId + '/' + imageUrl;
    console.log(url);

    return (
        <Card
            style={{
                width: 300,
                padding: 0,
                borderRadius: 5,
            }}
            bodyStyle={{ padding: 0 }}
            onClick={() => navigator(`/${type}/detail?id=${cardId}`)}
        >
            <div style={{ height: 180 }}>
                <img
                    src={url}
                    alt="card"
                    style={{
                        width: '100%',
                        height: '100%',
                        objectFit: 'cover',
                        borderRadius: '5px 5px 0 0',
                    }}
                />
            </div>

            <div
                style={{
                    background: 'rgba(104, 136, 122, 0.7)',
                    color: 'rgba(255, 255, 255, 0.88)',
                    borderRadius: '0 0 5px 5px',
                    fontSize: '16px',
                    padding: '5px 10px',
                }}
            >
                {title}
            </div>
        </Card>
    );
};

CommonCard.propTypes = {
    type: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    cardId: PropTypes.string.isRequired,
    baseUrl: PropTypes.string.isRequired,
    imageUrl: PropTypes.string.isRequired,
};

export default CommonCard;
